```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代Web内容保护技术全解析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
            background-color: #f9fafb;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        }
        .code-block {
            background-color: #2d3748;
            border-radius: 0.5rem;
            padding: 1.5rem;
            color: #e2e8f0;
            font-family: 'Courier New', Courier, monospace;
            overflow-x: auto;
        }
        .section-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .section-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .highlight {
            position: relative;
        }
        .highlight:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #2563eb;
            border-radius: 2px;
        }
        .mermaid {
            background: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <div class="flex justify-center mb-6">
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white bg-opacity-20 text-white">
                    <i class="fas fa-shield-alt mr-2"></i> 内容保护专题
                </span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
                现代Web内容保护技术全解析
            </h1>
            <p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
                从基础CSS到高级JavaScript，全面掌握防止内容复制的专业方案
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#css" class="px-6 py-3 bg-white text-blue-700 font-medium rounded-lg hover:bg-opacity-90 transition duration-300">
                    <i class="fas fa-paint-brush mr-2"></i> CSS方案
                </a>
                <a href="#javascript" class="px-6 py-3 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:text-blue-700 transition duration-300">
                    <i class="fas fa-code mr-2"></i> JavaScript方案
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="bg-white rounded-xl p-6 section-card">
                <p class="text-lg text-gray-700 mb-4">
                    在数字化时代，内容保护成为许多网站和应用的重要需求。无论是保护原创文章、防止代码泄露，还是维护商业机密，禁止用户复制功能都扮演着关键角色。然而，仅仅依靠CSS的<code class="bg-gray-100 px-1 rounded">user-select: none</code>属性往往无法应对所有场景，用户仍然可以通过多种方式绕过这些基础限制。
                </p>
                <div class="mt-6">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752732927755-755d1357-3e77-4add-a9b1-44ada23f1fe0.png" alt="内容保护示意图" class="rounded-lg w-full object-cover max-h-96">
                </div>
            </div>
        </section>

        <!-- CSS Section -->
        <section id="css" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <span class="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center mr-3">1</span>
                CSS样式控制方案
            </h2>

            <div class="space-y-8">
                <!-- 1.1 -->
                <div class="bg-white rounded-xl p-6 section-card highlight">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-cog text-blue-500 mr-2"></i>
                        1.1 user-select属性详解
                    </h3>
                    <p class="text-gray-700 mb-4">
                        CSS的<code>user-select</code>属性是最基础的文本选择控制方案。通过设置不同的值，可以实现不同程度的文本选择限制。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
/* 禁止选择所有文本 */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 只允许选择文本，禁止选择其他元素 */
.text-only {
    user-select: text;
    -webkit-user-select: text;
}

/* 允许选择所有内容 */
.all-select {
    user-select: all;
    -webkit-user-select: all;
}
                        </code></pre>
                    </div>
                </div>

                <!-- 1.2 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-browser text-blue-500 mr-2"></i>
                        1.2 -webkit-user-select兼容性处理
                    </h3>
                    <p class="text-gray-700 mb-4">
                        不同浏览器对<code>user-select</code>属性的支持程度不同，特别是WebKit内核的浏览器需要添加前缀。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
/* 完整的跨浏览器兼容写法 */
.protect-content {
    -webkit-user-select: none;  /* Safari, Chrome */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* 标准语法 */
}
                        </code></pre>
                    </div>
                </div>

                <!-- 1.3 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-sliders-h text-blue-500 mr-2"></i>
                        1.3 CSS选择器优化策略
                    </h3>
                    <p class="text-gray-700 mb-4">
                        通过精确的CSS选择器，可以针对特定内容进行保护，避免影响用户体验。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
/* 只保护重要内容，允许选择导航和按钮 */
.important-content {
    user-select: none;
}

/* 允许选择代码块中的注释 */
.code-comment {
    user-select: text;
}

/* 保护图片和视频 */
.media-content img,
.media-content video {
    user-select: none;
    pointer-events: none;
}
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- JavaScript Section -->
        <section id="javascript" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <span class="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center mr-3">2</span>
                JavaScript事件拦截技术
            </h2>

            <div class="space-y-8">
                <!-- 2.1 -->
                <div class="bg-white rounded-xl p-6 section-card highlight">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-keyboard text-blue-500 mr-2"></i>
                        2.1 键盘事件监听与阻止
                    </h3>
                    <p class="text-gray-700 mb-4">
                        通过监听键盘事件，可以阻止用户使用快捷键进行复制操作。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 阻止复制快捷键
document.addEventListener('keydown', function(e) {
    // 阻止 Ctrl+C (复制)
    if (e.ctrlKey && e.key === 'c') {
        e.preventDefault();
        return false;
    }
    
    // 阻止 Ctrl+A (全选)
    if (e.ctrlKey && e.key === 'a') {
        e.preventDefault();
        return false;
    }
    
    // 阻止 Ctrl+X (剪切)
    if (e.ctrlKey && e.key === 'x') {
        e.preventDefault();
        return false;
    }
});
                        </code></pre>
                    </div>
                </div>

                <!-- 2.2 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-mouse-pointer text-blue-500 mr-2"></i>
                        2.2 鼠标右键菜单禁用
                    </h3>
                    <p class="text-gray-700 mb-4">
                        禁用右键菜单是防止用户通过上下文菜单复制内容的有效方法。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    return false;
});

// 针对特定元素禁用右键菜单
document.querySelector('.protected-content').addEventListener('contextmenu', function(e) {
    e.preventDefault();
    return false;
});
                        </code></pre>
                    </div>
                </div>

                <!-- 2.3 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-hand-paper text-blue-500 mr-2"></i>
                        2.3 拖拽选择功能屏蔽
                    </h3>
                    <p class="text-gray-700 mb-4">
                        通过阻止拖拽事件，可以防止用户通过拖拽选择文本。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 阻止拖拽选择
document.addEventListener('dragstart', function(e) {
    e.preventDefault();
    return false;
});

// 阻止选择开始事件
document.addEventListener('selectstart', function(e) {
    e.preventDefault();
    return false;
});
                        </code></pre>
                    </div>
                </div>

                <!-- 2.4 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-clipboard text-blue-500 mr-2"></i>
                        2.4 剪贴板操作拦截
                    </h3>
                    <p class="text-gray-700 mb-4">
                        监听剪贴板事件，可以阻止用户复制内容到剪贴板。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 阻止复制到剪贴板
document.addEventListener('copy', function(e) {
    e.preventDefault();
    return false;
});

// 阻止剪切到剪贴板
document.addEventListener('cut', function(e) {
    e.preventDefault();
    return false;
});

// 阻止粘贴操作
document.addEventListener('paste', function(e) {
    e.preventDefault();
    return false;
});
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Browser Compatibility Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <span class="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center mr-3">3</span>
                浏览器兼容性解决方案
            </h2>

            <div class="space-y-8">
                <!-- 3.1 -->
                <div class="bg-white rounded-xl p-6 section-card highlight">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-check-circle text-blue-500 mr-2"></i>
                        3.1 跨浏览器兼容性测试
                    </h3>
                    <p class="text-gray-700 mb-4">
                        不同浏览器对事件处理的支持存在差异，需要进行兼容性处理。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 兼容性处理函数
function preventCopy(element) {
    // 现代浏览器
    if (element.addEventListener) {
        element.addEventListener('copy', function(e) {
            e.preventDefault();
            return false;
        });
    }
    // IE 8及以下版本
    else if (element.attachEvent) {
        element.attachEvent('oncopy', function() {
            return false;
        });
    }
}
                        </code></pre>
                    </div>
                </div>

                <!-- 3.2 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-mobile-alt text-blue-500 mr-2"></i>
                        3.2 移动端特殊处理
                    </h3>
                    <p class="text-gray-700 mb-4">
                        移动设备上的复制行为与桌面端不同，需要特殊处理。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 移动端特殊处理
if ('ontouchstart' in window) {
    // 阻止长按选择
    document.addEventListener('touchstart', function(e) {
        e.preventDefault();
    }, {passive: false});
    
    // 阻止双击选择
    document.addEventListener('touchend', function(e) {
        e.preventDefault();
    }, {passive: false});
}
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- User Experience Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <span class="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center mr-3">4</span>
                用户体验与安全平衡
            </h2>

            <div class="space-y-8">
                <!-- 4.1 -->
                <div class="bg-white rounded-xl p-6 section-card highlight">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-user-shield text-blue-500 mr-2"></i>
                        4.1 合法用户操作保护
                    </h3>
                    <p class="text-gray-700 mb-4">
                        在保护内容的同时，需要确保合法用户的正常操作不受影响。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 允许特定用户或特定操作
function allowCopyForAuthorized() {
    const isAuthorized = checkUserPermission();
    
    if (isAuthorized) {
        document.removeEventListener('copy', preventCopy);
        document.removeEventListener('contextmenu', preventContextMenu);
    }
}
                        </code></pre>
                    </div>
                </div>

                <!-- 4.2 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-universal-access text-blue-500 mr-2"></i>
                        4.2 无障碍访问考虑
                    </h3>
                    <p class="text-gray-700 mb-4">
                        确保网站的无障碍访问性，为特殊用户群体提供便利。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
/* 为屏幕阅读器提供可访问性 */
@media screen and (max-width: 0px) {
    .protected-content {
        user-select: text; /* 允许屏幕阅读器选择文本 */
    }
}
                        </code></pre>
                    </div>
                </div>

                <!-- 4.3 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-tachometer-alt text-blue-500 mr-2"></i>
                        4.3 性能优化建议
                    </h3>
                    <p class="text-gray-700 mb-4">
                        避免过度使用事件监听器，影响页面性能。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 使用事件委托优化性能
document.addEventListener('copy', function(e) {
    // 只对特定元素进行保护
    if (e.target.closest('.protected-content')) {
        e.preventDefault();
        return false;
    }
}, true); // 使用捕获阶段
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Advanced Techniques Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <span class="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center mr-3">5</span>
                高级防护技术
            </h2>

            <div class="space-y-8">
                <!-- 5.1 -->
                <div class="bg-white rounded-xl p-6 section-card highlight">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
                        5.1 动态内容保护
                    </h3>
                    <p class="text-gray-700 mb-4">
                        对于动态生成的内容，需要实时应用保护措施。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 监听DOM变化，自动保护新内容
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
            if (node.nodeType === 1) { // 元素节点
                applyProtection(node);
            }
        });
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});
                        </code></pre>
                    </div>
                </div>

                <!-- 5.2 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-water text-blue-500 mr-2"></i>
                        5.2 水印技术应用
                    </h3>
                    <p class="text-gray-700 mb-4">
                        通过添加水印，即使内容被复制也能追踪来源。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 动态添加水印
function addWatermark(element) {
    const watermark = document.createElement('div');
    watermark.textContent = '版权所有 © 2024';
    watermark.style.cssText = `
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.1;
        pointer-events: none;
        user-select: none;
        z-index: 1000;
    `;
    element.style.position = 'relative';
    element.appendChild(watermark);
}
                        </code></pre>
                    </div>
                </div>

                <!-- 5.3 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-server text-blue-500 mr-2"></i>
                        5.3 服务端验证配合
                    </h3>
                    <p class="text-gray-700 mb-4">
                        结合服务端验证，提供更强大的保护机制。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 客户端保护 + 服务端验证
function validateContentAccess() {
    fetch('/api/validate-access', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            contentId: getCurrentContentId(),
            timestamp: Date.now()
        })
    }).then(response => {
        if (!response.ok) {
            // 移除保护措施，允许正常访问
            removeProtection();
        }
    });
}
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Case Studies Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <span class="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center mr-3">6</span>
                实际应用案例分析
            </h2>

            <div class="space-y-8">
                <!-- 6.1 -->
                <div class="bg-white rounded-xl p-6 section-card highlight">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                        6.1 在线文档系统防护
                    </h3>
                    <p class="text-gray-700 mb-4">
                        在线文档系统需要保护文档内容，同时允许用户进行必要的操作。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 在线文档保护方案
class DocumentProtector {
    constructor() {
        this.isEditing = false;
        this.initProtection();
    }
    
    initProtection() {
        // 默认启用保护
        this.enableProtection();
        
        // 监听编辑模式切换
        document.addEventListener('editModeToggle', (e) => {
            this.isEditing = e.detail.isEditing;
            if (this.isEditing) {
                this.disableProtection();
            } else {
                this.enableProtection();
            }
        });
    }
    
    enableProtection() {
        document.body.classList.add('protected');
        this.bindEvents();
    }
    
    disableProtection() {
        document.body.classList.remove('protected');
        this.unbindEvents();
    }
}
                        </code></pre>
                    </div>
                </div>

                <!-- 6.2 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-file-code text-blue-500 mr-2"></i>
                        6.2 代码展示页面保护
                    </h3>
                    <p class="text-gray-700 mb-4">
                        代码展示页面需要防止代码被直接复制，但允许用户查看和学习。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
<!-- 代码展示页面示例 -->
&lt;div class="code-container"&gt;
    &lt;pre class="code-block" data-protected="true"&gt;
        &lt;code&gt;
            function example() {
                console.log("这是受保护的代码");
            }
        &lt;/code&gt;
    &lt;/pre&gt;
    &lt;button class="copy-btn" onclick="requestCodeCopy()"&gt;
        申请复制权限
    &lt;/button&gt;
&lt;/div&gt;
                        </code></pre>
                    </div>
                </div>

                <!-- 6.3 -->
                <div class="bg-white rounded-xl p-6 section-card">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-lock text-blue-500 mr-2"></i>
                        6.3 付费内容网站实现
                    </h3>
                    <p class="text-gray-700 mb-4">
                        付费内容网站需要根据用户权限决定是否启用保护。
                    </p>
                    <div class="code-block mt-4">
                        <pre><code>
// 付费内容保护系统
class PremiumContentProtector {
    constructor(userSubscription) {
        this.userSubscription = userSubscription;
        this.initProtection();
    }
    
    initProtection() {
        if (!this.userSubscription.isActive) {
            this.applyFullProtection();
        } else if (this.userSubscription.level === 'basic') {
            this.applyBasicProtection();
        } else {
            this.applyNoProtection();
        }
    }
    
    applyFullProtection() {
        // 完全保护：禁止所有复制操作
        this.preventAllCopy();
        this.addWatermark();
        this.disableRightClick();
    }
    
    applyBasicProtection() {
        // 基础保护：允许部分操作
        this.preventCopy();
        this.allowSelection();
    }
}
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-project-diagram text-blue-500 mr-2"></i>
                Web内容保护技术图谱
            </h2>
            <div class="bg-white rounded-xl p-6">
                <div class="mermaid">
                    graph TD
                    A[Web内容保护方案] --> B[CSS控制]
                    A --> C[JavaScript拦截]
                    A --> D[服务端配合]
                    
                    B --> B1[user-select属性]
                    B --> B2[浏览器前缀兼容]
                    B --> B3[精准选择器]
                    
                    C --> C1[键盘事件拦截]
                    C --> C2[右键菜单禁用]
                    C --> C3[剪贴板控制]
                    C --> C4[动态内容保护]
                    
                    D --> D1[水印技术]
                    D --> D2[权限验证]
                    D --> D3[内容加密]
                </div>
            </div>
        </section>
    </div>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Tooltip functionality
        document.querySelectorAll('.tooltip').forEach(element => {
            element.addEventListener('mouseenter', function() {
                const tooltip = this.querySelector('.tooltip-text');
                tooltip.style.opacity = '1';
                tooltip.style.visibility = 'visible';
            });
            element.addEventListener('mouseleave', function() {
                const tooltip = this.querySelector('.tooltip-text');
                tooltip.style.opacity = '0';
                tooltip.style.visibility = 'hidden';
            });
        });
    </script>
</body>
</html>
```